<template>
	<!-- 加载中 -->
	<uni-load-more :status="loadingStatus" v-if="isLoading" />

	<!-- 历史任务页面容器 - 使用scroll-view实现下拉刷新 -->
	<scroll-view v-else class="task-history-container" scroll-y refresher-enabled="true" refresher-threshold="45"
		refresher-bg="#f9f9f9" refresher-color="#4CAF50" @refresherpulling="onRefreshPulling"
		:refresher-triggered="isRefresher" @refresherrefresh="onRefresh" @refresherrestore="onRefreshRestore"
		@refresherabort="onRefreshAbort">
		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 日期分组的任务历史 -->
			<view class="date-section" v-for="section in historySections" :key="section.date">
				<view class="date-header">{{ section.header }}</view>
				<view class="history-list">
					<view class="history-item" v-for="item in section.tasks" :key="item.id">
						<view class="task-icon">{{ item.icon }}</view>
						<view class="task-info">
							<text class="task-title">{{ item.taskName }}</text>
							<text class="completion-time">完成时间: {{ item.modifyTime }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="no-data" v-if="historySections.length === 0">
				<text class="no-data-text">当前无历史数据</text>
			</view>

			<!-- 底部空间，确保内容不被导航栏遮挡 -->
			<view class="bottom-space"></view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	// 导入任务API
	import {
		listHistoryTaskAPI
	} from '../../../services/task';
	/**
	 * 历史记录分组数据
	 */
	const historySections = ref([]);

	/**
	 * 刷新状态
	 */
	const isRefresher = ref(false);
	/**
	 * 加载状态
	 */
	const isLoading = ref(false);

	/**
	 * 加载状态文本
	 */
	const loadingStatus = ref('more');
	/**
	 * 获取历史任务数据（API包装方法）
	 * @returns Promise<void>
	 */
	const getHistoryTaskData = async () => {
		try {
			// 调用API获取历史任务数据
			const response = await listHistoryTaskAPI();
			const rawTasks = response.data || [];

			// 按completeDate字段分组数据
			const groupedData = {};

			rawTasks.forEach(task => {
				if (task.completeDate) {
					const dateKey = task.completeDate;
					if (!groupedData[dateKey]) {
						groupedData[dateKey] = [];
					}
					groupedData[dateKey].push({
						id: task.id?.toString(),
						taskName: task.taskName,
						icon: task.icon,
						modifyTime: task.modifyTime ? task.modifyTime.split(' ')[1] : ''
					});
				}
			});

			// 转换为前端需要的格式并添加头部信息
			const sections = Object.keys(groupedData)
				.sort((a, b) => new Date(b).getTime() - new Date(a).getTime())
				.map(dateStr => ({
					date: dateStr,
					header: formatHeaderDate(dateStr),
					tasks: groupedData[dateStr]
				}));

			historySections.value = sections;
		} catch (error) {
			console.error('加载历史任务数据失败:', error);
			// 错误处理：保持historySections为空，前端会显示无数据提示
			historySections.value = [];
		}
	};



	/**
	 * 格式化头部日期（处理2025-09-25这样的格式）
	 * @param dateStr 日期字符串
	 * @returns 格式化后的日期头部
	 */
	const formatHeaderDate = (dateStr) => {
		try {
			const date = new Date(dateStr);
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			const yesterday = new Date(today);
			yesterday.setDate(yesterday.getDate() - 1);
			const targetDate = new Date(date);
			targetDate.setHours(0, 0, 0, 0);

			if (targetDate.getTime() === today.getTime()) {
				return `今天 - ${formatFullDate(date)}`;
			} else if (targetDate.getTime() === yesterday.getTime()) {
				return `昨天 - ${formatFullDate(date)}`;
			} else {
				return formatFullDate(date);
			}
		} catch (error) {
			console.error('格式化日期失败:', error);
			return dateStr;
		}
	};

	/**
	 * 格式化完整日期
	 * @param date Date对象
	 * @returns 格式化的日期字符串
	 */
	const formatFullDate = (date) => {
		try {
			return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日`;
		} catch {
			return date.toString();
		}
	};

	/**
	 * 页面加载时获取数据
	 */
	onMounted(() => {
		// 开启加载状态
		isLoading.value = true;
		loadingStatus.value = 'loading';
		getHistoryTaskData()
		setTimeout(() => {
			// 关闭加载状态
			isLoading.value = false;
			loadingStatus.value = 'more';
		}, 1000);
	});







	/**
	 * 下拉刷新处理函数
	 */
	const onRefresh = async () => {
		isRefresher.value = true;
		try {
			// 重新获取历史任务数据
			await getHistoryTaskData();
		} finally {
			setTimeout(() => {
				isRefresher.value = false;
			}, 500);
		}
	};
</script>

<style lang="scss" scoped>
	// 全局样式变量
	$primary-color: #4CAF50;
	$bg-color: #f9f9f9;
	$text-color: #333;
	$text-secondary: #888;
	$border-radius: 8px;
	$nav-height: 60px;

	// 主容器 - 历史任务页面主容器（使用scroll-view）
	.task-history-container {
		height: 100vh;
		background-color: $bg-color;
	}

	// 主要内容区域 - 页面内容展示区域
	.content-container {
		padding: 20px;
		flex: 1;
	}

	// 日期分组 - 日期分组的容器
	.date-section {
		margin-bottom: 30px;
	}

	// 日期头部 - 日期分组的标题
	.date-header {
		background-color: #e0e0e0;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
		font-weight: bold;
	}

	// 历史任务列表 - 任务列表容器
	.history-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	// 历史任务项 - 单个任务展示项
	.history-item {
		background: white;
		border-radius: $border-radius;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
	}

	// 任务图标 - 任务类型图标
	.task-icon {
		width: 40px;
		height: 40px;
		background-color: #e0e0e0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15px;
		font-size: 20px;
	}

	// 任务信息 - 任务详细信息容器
	.task-info {
		flex: 1;
	}

	// 任务标题 - 任务名称
	.task-title {
		display: block;
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 5px;
	}

	// 完成时间 - 任务完成时间文本
	.completion-time {
		display: block;
		color: $text-secondary;
		font-size: 0.9rem;
	}

	// 无数据提示 - 无历史数据时的提示容器
	.no-data {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: $text-secondary;
		font-size: 16px;
	}

	// 无数据文本 - 无历史数据时的提示文字
	.no-data-text {
		text-align: center;
		line-height: 1.5;
	}

	// 底部空间 - 确保内容不被导航栏遮挡的底部空间
	.bottom-space {
		height: $nav-height;
	}
</style>